<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Ionic Book Manager</title>
    <base href="./"/>
    <meta name="color-scheme" content="light dark"/>
    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <link rel="shortcut icon" type="image/png" href="./assets/icon/favicon.png"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-title" content="Ionic Book Manager"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    
    <!-- CSS Files -->
    <link href="./css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./css/app.7b141fc5.css" rel="stylesheet">
    
    <!-- Debug overlay -->
    <style>
        .debug-overlay {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 10000;
            max-width: 300px;
            max-height: 200px;
            overflow-y: auto;
        }
        .debug-status {
            margin: 2px 0;
        }
        .status-success { color: #4CAF50; }
        .status-error { color: #F44336; }
        .status-warning { color: #FF9800; }
    </style>
</head>
<body>
    <div id="app"></div>
    
    <!-- Debug overlay -->
    <div class="debug-overlay">
        <div class="debug-status">🔧 HarmonyOS Debug Info</div>
        <div id="debug-html" class="debug-status status-success">✓ HTML Loaded</div>
        <div id="debug-css" class="debug-status">⏳ CSS Loading...</div>
        <div id="debug-js" class="debug-status">⏳ JS Loading...</div>
        <div id="debug-vue" class="debug-status">⏳ Vue Mounting...</div>
        <div id="debug-router" class="debug-status">⏳ Router Loading...</div>
        <div id="debug-app" class="debug-status">⏳ App Rendering...</div>
    </div>

    <script>
        // Debug helper functions
        function updateDebugStatus(id, message, status = 'success') {
            const element = document.getElementById(id);
            if (element) {
                element.className = `debug-status status-${status}`;
                element.innerHTML = status === 'success' ? `✓ ${message}` : 
                                  status === 'error' ? `✗ ${message}` : 
                                  `⏳ ${message}`;
            }
        }

        // Environment setup for HarmonyOS
        window.process = window.process || {};
        window.process.env = window.process.env || {};
        window.process.env.NODE_ENV = 'production';
        window.process.env.BASE_URL = './';
        window.process.env.VUE_APP_TITLE = 'Ionic Book Manager';

        // Global error handler
        window.addEventListener('error', function(e) {
            console.error('Global error:', e.error);
            updateDebugStatus('debug-js', `Error: ${e.message}`, 'error');
        });

        // Check CSS loading
        function checkCSSLoaded() {
            const links = document.querySelectorAll('link[rel="stylesheet"]');
            let loadedCount = 0;
            let totalCount = links.length;

            links.forEach(link => {
                if (link.sheet) {
                    loadedCount++;
                } else {
                    link.addEventListener('load', () => {
                        loadedCount++;
                        if (loadedCount === totalCount) {
                            updateDebugStatus('debug-css', 'CSS Files Loaded');
                        }
                    });
                    link.addEventListener('error', () => {
                        updateDebugStatus('debug-css', `CSS Error: ${link.href}`, 'error');
                    });
                }
            });

            if (loadedCount === totalCount) {
                updateDebugStatus('debug-css', 'CSS Files Loaded');
            }
        }

        // Monitor Vue app mounting
        let appMountTimeout;
        function checkAppMounted() {
            const appElement = document.getElementById('app');
            if (appElement && appElement.innerHTML.trim() !== '') {
                updateDebugStatus('debug-vue', 'Vue App Mounted');
                updateDebugStatus('debug-app', 'App Content Rendered');
                clearTimeout(appMountTimeout);
                
                // Check for router
                if (window.location.hash) {
                    updateDebugStatus('debug-router', 'Router Active');
                } else {
                    setTimeout(() => {
                        if (window.location.hash) {
                            updateDebugStatus('debug-router', 'Router Active');
                        } else {
                            updateDebugStatus('debug-router', 'Router Not Active', 'warning');
                        }
                    }, 2000);
                }
            } else {
                setTimeout(checkAppMounted, 500);
            }
        }

        // Set timeout for app mounting
        appMountTimeout = setTimeout(() => {
            updateDebugStatus('debug-vue', 'Vue Mount Timeout', 'error');
            updateDebugStatus('debug-app', 'App Render Failed', 'error');
        }, 10000);

        // Start monitoring when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            checkCSSLoaded();
            checkAppMounted();
        });

        // Monitor script loading
        let scriptsLoaded = 0;
        let totalScripts = 0;
        
        function onScriptLoad() {
            scriptsLoaded++;
            updateDebugStatus('debug-js', `Scripts: ${scriptsLoaded}/${totalScripts}`);
            if (scriptsLoaded === totalScripts) {
                updateDebugStatus('debug-js', 'All Scripts Loaded');
            }
        }

        function onScriptError(src) {
            updateDebugStatus('debug-js', `Script Error: ${src}`, 'error');
        }
    </script>

    <!-- Legacy JavaScript Files (for HarmonyOS compatibility) -->
    <script defer src="./js/chunk-ionic-legacy.434e31d2.js" nomodule onload="onScriptLoad()" onerror="onScriptError(this.src)"></script>
    <script defer src="./js/chunk-vendors-legacy.cd066ad9.js" nomodule onload="onScriptLoad()" onerror="onScriptError(this.src)"></script>
    <script defer src="./js/app-legacy.5f6219e6.js" nomodule onload="onScriptLoad()" onerror="onScriptError(this.src)"></script>

    <script>
        // Count total scripts
        totalScripts = document.querySelectorAll('script[src]').length;
        updateDebugStatus('debug-js', `Loading ${totalScripts} scripts...`);
    </script>
</body>
</html>